<template>
  <div style="display: flex;align-items: center;justify-content: center;min-height: 700px;">
    <div class="dowebok" id="dowebok">
      <div class="form-container sign-up-container" v-show="!loginToggle">
          <form action="#">
              <h3>注册</h3>
              <div class="social-container">
                  <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                  <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                  <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
              </div>
              <span>或使用邮箱注册</span>
              <input type="text" placeholder="姓名">
              <input type="email" placeholder="电子邮箱">
              <input type="password" placeholder="密码">
              <button >注册</button>
          </form>
      </div>
      <div class="form-container sign-in-container" v-show="loginToggle">
        <form action="#">
          <h3>登录</h3>
          <div class="social-container">
            <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
            <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
          </div>
          <span>或使用您的帐号</span>
          <input type="email" placeholder="电子邮箱">
          <input type="password" placeholder="密码">
          <a href="#">忘记密码？</a>
          <button @click="login">登录</button>
        </form>
      </div>
      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-panel overlay-right" v-show="!loginToggle">
                  <h3>已有帐号？</h3>
                  <p>请使用您的帐号进行登录</p>
                  <button class="ghost" id="signIn" @click="open" >登录</button>
          </div>
          <div class="overlay-panel overlay-right" v-show="loginToggle">
            <h3>没有帐号？</h3>
            <p>立即注册加入我们，和我们一起开始旅程吧</p>
            <button class="ghost" id="signUp" @click="open">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginToggle: true
    }
  },
  methods: {
    open() {
      this.loginToggle = !this.loginToggle
    },
    login() {
      sessionStorage.setItem("token",12345)
      let history = sessionStorage.getItem("history")
      let path = history || "/index"
      this.$router.replace({path: path})
    }
  }
}
</script>

<style>
    * {
      box-sizing: border-box;
    }

    .dowebok {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
      position: relative;
      overflow: hidden;
      width: 768px;
      max-width: 100%;
      min-height: 480px;
      /* margin: 0 auto; */
    }

    .form-container {
      position: absolute;
      top: 0;
      height: 100%;
      transition: all .6s ease-in-out;
      width: 50%;
    }

    .social-container {
      margin: 20px 0;
    }

    .social-container a {
      border: 1px solid #ddd;
      border-radius: 50%;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin: 0 5px;
      height: 40px;
      width: 40px;
    }

    .overlay-container {
      position: absolute;
      top: 0;
      left: 50%;
      width: 50%;
      height: 100%;
      overflow: hidden;
      transition: transform .6s ease-in-out;
      z-index: 100;
    }

    .overlay {
      background: #ff416c;
      background: linear-gradient(to right, #ff4b2b, #ff416c) no-repeat 0 0 / cover;
      color: #fff;
      position: relative;
      left: -100%;
      height: 100%;
      width: 200%;
      transform: translateY(0);
      transition: transform .6s ease-in-out;
    }

    .overlay-left {
      transform: translateY(-20%);
    }

    .overlay-panel {
      position: absolute;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 40px;
      height: 100%;
      width: 50%;
      text-align: center;
      transform: translateY(0);
      transition: transform .6s ease-in-out;
    }

    button {
      border-radius: 20px;
      border: 1px solid #ff4b2b;
      background: #ff4b2b;
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      padding: 12px 45px;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: transform 80ms ease-in;
      cursor: pointer;
    }

    .form-container input {
      background: #eee;
      border: none;
      padding: 12px 15px;
      margin: 8px 0;
      width: 100%;
      outline: none;
    }

    .overlay-panel {
      position: absolute;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 40px;
      height: 100%;
      width: 50%;
      text-align: center;
      transform: translateY(0);
      transition: transform .6s ease-in-out;
    }

    .overlay-right {
      right: 0;
      transform: translateY(0);
    }

    button.ghost {
      background: transparent;
      border-color: #fff;
    }

    a {
      color: #333;
      font-size: 14px;
      text-decoration: none;
      margin: 15px 0;
    }

    .form-container form {
      background: #fff;
      display: flex;
      flex-direction: column;
      padding: 0 50px;
      height: 100%;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .sign-up-container {
      left: 0;
      width: 50%;
      z-index: 1;

    }
  </style>